<template>
  <div class="calendarContent" style="color: #fff;">
    <el-card>
      <el-page-header @back="router.back()">
        <template #content>
          <span class="text-large font-600 mr-3" style="color: #fff;"> {{ route.query.title }} </span>
        </template>
      </el-page-header>
    </el-card>
    <div class="calendarMain" v-defaultBind="'1'">
      <el-card style="background: black;">
        <div class="head">
          <div class="headItemLeft"></div>
          <div class="headItemRight"></div>
        </div>
        <el-calendar v-model="tiemValue" :checked="checkTime()" ref="calendar" style="border: 3px solid #dc5e52;padding-top: 15px;">
          <template #header="{ date }">
            <span>
              <span style="font-size: 20px; font-weight: 500;color: #dc5e52;">当前：</span>
              <span style="font-size: 26px; font-weight: 500;color: #fbefb8;">{{ yearTitle }}</span>
            </span>
            <span style="font-size: 28px; font-weight: 500;color: #dc5e52;">{{ date }}</span>
            <el-button-group>
              <el-button size="small" @click="selectDate('prev-year')" type="warning">
                <span style="font-size: 12px;">上一年</span>
              </el-button>
              <el-button size="small" @click="selectDate('prev-month')" type="primary">
                <span style="font-size: 12px;">上个月</span>
              </el-button>
              <el-button size="small" @click="selectDate('today')" type="danger">
                <span style="font-size: 12px;">今天</span>
              </el-button>
              <el-button size="small" @click="selectDate('next-month')" type="primary">
                <span style="font-size: 12px;">下个月</span>
              </el-button>
              <el-button size="small" @click="selectDate('next-year')" type="warning">
                <span style="font-size: 12px;">后一年</span>
              </el-button>
            </el-button-group>
          </template>
          <template #date-cell="{ data }">
            <div :class="data.isSelected ? 'is-selected' : ''" @click="showDay()">
              <p style="white-space: nowrap;overflow: hidden;">
                {{ data.day.split('-').slice(2).join('') + '日' }}
                <span style="background: #fbefb8;">{{ data.isSelected ? '✔️' : '' }}</span>
              </p>
              <p style="margin-top: 10px;font-size: 12px;">
                {{ getLunarDay(data.day.split('-').slice(0)[0], data.day.split('-').slice(0)[1], data.day.split('-').slice(0)[2]) }}
              </p>
              <p style="margin-top: 10px;font-size: 12px;">
                {{ holidays(data.day.split('-').slice(1)[0], data.day.split('-').slice(1)[1]) }}
              </p>
              <p style="margin-top: 10px;font-size: 12px;">
                {{ chuxi(data.day.split('-').slice(0)[0], data.day.split('-').slice(0)[1], data.day.split('-').slice(0)[2]) }}
              </p>
              <p style="margin-top: 10px;font-size: 12px;">
                {{ lunarDayHolidays(getLunarDay(data.day.split('-').slice(0)[0], data.day.split('-').slice(0)[1], data.day.split('-').slice(0)[2])) }}
              </p>
              <p style="margin-top: 10px;font-size: 12px;"
                v-if="
                !holidays(data.day.split('-').slice(1)[0], data.day.split('-').slice(1)[1])
                &&
                !lunarDayHolidays(getLunarDay(data.day.split('-').slice(0)[0], data.day.split('-').slice(0)[1], data.day.split('-').slice(0)[2]))
                "
              >
                {{ getjq(data.day.split('-').slice(0)[0], data.day.split('-').slice(0)[1], data.day.split('-').slice(0)[2]) }}
              </p>
              <p style="margin-top: 10px;font-size: 12px;">
                {{ thanksgivingDay(data.day.split('-').slice(0)[0], data.day.split('-').slice(0)[1], data.day.split('-').slice(0)[2]) }}
              </p>
            </div>
          </template>
        </el-calendar>
        <div class="foot"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { CalendarDateType, CalendarInstance } from 'element-plus'
import { getLunar } from 'chinese-lunar-calendar'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()
const router = useRouter()

const tiemValue = ref(new Date())
const yearTitle = ref<string>('')

const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}

const checkTime = () => {
  return false
}

const yeart = () => {
  const now = new Date()
  const year = now.getFullYear()
  const ss = year - 2008 //设定2008为初始年份
  const ssc = ss % 12
  const ssyear = new Array("子鼠", "丑牛", "寅虎", "卯兔", "辰龙", "巳蛇", "午马", "未羊", "申猴", "酉鸡", "戌狗", "亥猪")
  yearTitle.value = `${ssyear[ssc]} ${year} 年`
}

// 阳历节日
const holidays = (month: any, date: any) => {
  if (!month || !date) return '获取失败'
  if ((month == 1) && (date == 1)) return '元旦'
  if ((month == 3) && (date == 8)) return '妇女节👩'
  if ((month == 3) && (date == 12)) return '植树节🌲'
  if ((month == 3) && (date == 14)) return '白色情人节'
  if ((month == 3) && (date == 15)) return '消费者权益日'
  if ((month == 3) && (date == 21)) return '世界睡眠日'
  if ((month == 4) && (date == 1)) return '愚人节'
  if ((month == 4) && (date == 5)) return '清明节'
  if ((month == 4) && (date == 7)) return '世界卫生日'
  if ((month == 5) && (date == 1)) return '国际劳动节'
  if ((month == 5) && (date == 4)) return '青年节'
  if ((month == 5) && (date == 12)) return '国际护士节'
  if ((month == 5) && (date == 31)) return '世界无烟日'
  if ((month == 6) && (date == 1)) return '国际儿童节'
  if ((month == 6) && (date == 18)) return '京东618'
  if ((month == 6) && (date == 23)) return '国际奥利匹克日'
  if ((month == 6) && (date == 26)) return '国际禁毒日'
  if ((month == 8) && (date == 1)) return '建军节'
  if ((month == 9) && (date == 3)) return '反法西斯纪念日'
  if ((month == 9) && (date == 10)) return '教师节'
  if ((month == 10) && (date == 1)) return '国庆节'
  if ((month == 10) && (date == 31)) return '万圣节前夜🎃'
  if ((month == 11) && (date == 1)) return '万圣节🎃'
  if ((month == 11) && (date == 11)) return '天猫购物节'
  if ((month == 12) && (date == 24)) return '平安夜🎄'
  if ((month == 12) && (date == 25)) return '圣诞节🎄'
  if ((month == 12) && (date == 26)) return '狂欢夜🎄'
}

// 农历
const getLunarDay = (y: any, m: any, d: any) => {
  let result = getLunar(y, m, d).dateStr
  if (!result) {
    return '获取失败'
  }
  // 获取当前年份、月份、日期
  const currentYear = new Date().getFullYear().toString()
  const currentMonth = (new Date().getMonth() + 1).toString()
  const currentDay = new Date().getDate().toString()
  if (y === currentYear && m === currentMonth && d === currentDay) {
    result += ' 📍 今天'
  }
  return result
}


const chuxiYear = ref<any>()
const chuxiMonth = ref<any>()
const chuxiDay = ref<any>()
// 除夕节日
const chuxi = (y: any, m: any, d: any) => {
  if (getLunarDay(y, m, d) == '正月初一') {
    chuxiYear.value = y
    chuxiMonth.value = m
    chuxiDay.value = d-1
  }
  if (chuxiYear.value == y && chuxiMonth.value == m && chuxiDay.value == d) {
    return '除夕'
  }
}

// 农历节日
const lunarDayHolidays = (day: string) => {
  if (!day) return '获取失败'
  if (day == '三月初三') return '上巳节'
  if (day == '五月初五') return '端午节'
  if (day == '七月初七') return '七夕节'
  if (day == '七月十五') return '中元节'
  if (day == '八月十五') return '中秋节'
  if (day == '九月初九') return '重阳节'
  if (day == '十月十五') return '下元节'
  if (day == '腊月初八') return '腊八节'
  if (day == '腊月廿三') return '北方小年'
  if (day == '腊月廿四') return '南方小年'
  if (day == '正月初一') return '春节'
  if (day == '正月初二') return '春节'
  if (day == '正月初三') return '春节'
  if (day == '正月初四') return '春节'
  if (day == '正月初五') return '春节'
  if (day == '正月初六') return '春节'
  if (day == '正月初七') return '春节'
  if (day == '正月十五') return '元宵节'
  if (day == '二月初二') return '龙抬头'
}

// 二十四节气
const getjq = (yyyy: any, mm: any, dd: any) => {
    mm = mm-1;
    let sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758)
    let solarTerm = new Array("小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至")
    let tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2+1]*60000)+Date.UTC(1900,0,6,2,5))
    let tmp2 = tmp1.getUTCDate();
    let solarTerms = ''
    if (tmp2==dd) solarTerms = solarTerm[mm*2+1]
    tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2]*60000)+Date.UTC(1900,0,6,2,5))
    tmp2= tmp1.getUTCDate()
    if (tmp2==dd) solarTerms = solarTerm[mm*2]
    return solarTerms;
}

// 计算感恩节
const thanksgivingDay = (yyyy: any, mm: any, dd: any) => {
  // 美国感恩节
  const first_USA = new Date(yyyy, 10, 1)
  const day_of_week_USA = first_USA.getDay()
  const thankDayUSA = 22 + (11 - day_of_week_USA) % 7
  if ((mm == 11) && (dd == thankDayUSA)) return '美国感恩节'
  // 加拿大感恩节
  const first_CA = new Date(yyyy, 9, 1)
  const day_of_week_CA = first_CA.getDay()
  const thankDayCA = 8 + (8 - day_of_week_CA) % 7
  if ((mm == 10) && (dd == thankDayCA)) return '加拿大感恩节'
}


const showDay = () => {
  return false
}

onMounted(() => {
  yeart()
  ElMessageBox.confirm('受数据影响，二十四节气可能存在 1 ~ 2 天误差，仅供参考！', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    showClose: false,
    showCancelButton: false,
    closeOnClickModal: false,
  })
    .then(() => {

    })
    .catch((e: any) => {
      console.log(e)
    })
})

</script>

<style lang="scss" scoped>
.calendarContent {
  width: 100%;

  .el-card {
    border-radius: $base-card-border-radius;
  }

  .calendarMain {
    padding: 50px;
    .head {
      width: 100%;
      height: 35px;
      background: #dc5e52;
      border-radius: 12px 12px 0 0;
      position: relative;
      .headItemLeft {
        width: 35px;
        height: 30px;
        background: #dc5e52;
        border-radius: 4px 4px 0 0;
        position: absolute;
        left: 25%;
        top: -30px;
      }
      .headItemRight {
        width: 35px;
        height: 30px;
        background: #dc5e52;
        border-radius: 4px 4px 0 0;
        position: absolute;
        right: 25%;
        top: -30px;
      }
    }
    .el-card {
      border-radius: 16px;
      padding: 30px;
      box-shadow: 0px 4px 18px 0px rgba(248,216,82, 0.9);
    }

    .is-selected {
      color: #fbefb8;
      font-size: 20px;
    }
    .foot {
      width: 100%;
      height: 35px;
      background: #dc5e52;
      border-radius: 0 0 12px 12px;
    }
  }
}
</style>